<template>
  <div class="orderDetail">
    <div class="orderDetail-head">
      <img :src="data.imgUrl" alt="" />
      <div class="info">
        <h3>{{ data.name }}</h3>
        <p class="order-info">
          <span>月售{{ data.sellCount }}份</span>
          <span>好评率{{ data.rating }}</span>
        </p>
        <div class="price-car">
          <p class="price">￥{{ data.price.toFixed(2) }}</p>
          <p class="car">
            <van-icon name="cart" />
            <span>加入购物车</span>
          </p>
        </div>
      </div>
    </div>
    <div class="desc">
      <p>商品介绍</p>
      <p class="goods-desc">{{ data.goodsDesc }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

//食物信息规则
interface Ifood {
  category?: string;
  ctime?: string;
  goodsDesc?: string;
  id?: number;
  imgUrl?: string;
  name?: string;
  price?: number;
  rating?: number;
  ratings?: Array<string>;
  sellCount?: number;
}

@Component
export default class extends Vue {
  data: Ifood = {};
  created(): void {
    let res: any = this.$route.query.foods;
    // console.log(JSON.parse(res));
    this.data = JSON.parse(res);
  }
}
</script>

<style lang="scss" scoped>
.orderDetail {
  background: #f4f5f7;
  height: 100%;
  width: 100%;
  .orderDetail-head {
    background: #fff;
    img {
      width: 100%;
      height: 240px;
      object-fit: cover;
    }
    .info {
      padding: 20px;
      h3 {
        font-size: 20px;
      }
      .order-info {
        line-height: 30px;
        span {
          font-size: 12px;
          color: #b5b5b5;
        }
      }
    }
    .price-car {
      display: flex;
      margin-top: 20px;
      justify-content: space-between;
      align-items: center;
      .price {
        font-size: 16px;
        color: red;
      }
      .car {
        display: flex;
        color: #000;
        background: #ffc300;
        align-items: center;
        padding: 10px;
        border-radius: 35px;
        font-size: 14px;
        justify-content: center;
        font-weight: bold;
        i {
          margin-right: 10px;
        }
      }
    }
  }
  .desc {
    padding: 20px;
    background: #fff;
    margin-top: 20px;
    p:first-child {
      font-size: 20px;
      margin-bottom: 20px;
    }
    .goods-desc {
      letter-spacing: 2px;
      line-height: 28px;
      font-size: 14px;
    }
  }
}
</style>